<ion-header>

  <ion-navbar>
    <ion-title>转账</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>

  <ion-item-group margin-bottom class="item-list">
    <ion-item-divider><span class="color-gray-light">账户余额</span></ion-item-divider>
    <account [readonly]="true" [refresh]="isRefresh"></account>
  </ion-item-group>

  <form [formGroup]="validateForm" (submit)="transferForm($event)" class="mb-30" style="min-height: 400px">
    <ion-item-group margin-bottom>
      <ion-item-divider><span class="color-gray-light">转账信息</span></ion-item-divider>
      <div class="bg-white">
        <div class="color-blue font-smaller p-5">快捷转账：将根据选择的矿机及购买方式直接生成转账金额，用户可以在此基础上修改</div>
        <div class="color-blue font-smaller p-5">非快捷转账：将由用户自行选择转账类型，并输入数量进行转账</div>
      </div>

      <ion-item>
        <ion-label>快捷转账：</ion-label>
        <ion-toggle formControlName="quickTransfer" (ionChange)="changeTransfer()"></ion-toggle>
      </ion-item>

      <ion-item>
        <ion-label fixed>对方账号：</ion-label>
        <ion-input type="text" formControlName="account" placeholder="请输入账号" (ionChange)="getUser()"></ion-input>
        <ion-note item-end *ngIf="realName" class="color-green">{{realName}}</ion-note>
      </ion-item>
      <div class="error-message" *ngIf="getFormControl('account').dirty&&getFormControl('account').errors">
        <ng-container *ngIf="getFormControl('account').hasError('required')">请输入对方账号</ng-container>
      </div>

      <ng-container *ngIf="getFormControl('quickTransfer').value">
        <ion-item>
          <ion-label>选择矿机：</ion-label>
          <ion-select formControlName="miner" placeholder="选择矿机" [cancelText]="'取消'" [okText]="'确定'" (ionChange)="getBuyType()">
            <ion-option *ngFor="let miner of minerList" [value]="miner">
              算力：{{miner.power}}（价格：{{miner.price}}JLB）
            </ion-option>
          </ion-select>
        </ion-item>
        <div class="error-message" *ngIf="getFormControl('miner').dirty&&getFormControl('miner').errors">
          <ng-container *ngIf="getFormControl('miner').hasError('required')">请选择矿机</ng-container>
        </div>

        <ng-container *ngIf="getFormControl('miner').value">
          <ion-item>
            <ion-label>购买方式：</ion-label>
            <ion-select formControlName="buyType" [cancelText]="'取消'" [okText]="'确定'" placeholder="选择矿机购买方式"
                        (ionChange)="getCoinsNum()">
              <ion-option *ngFor="let item of buyTypes;let i = index;" [value]="i+1">{{item}}</ion-option>
            </ion-select>
          </ion-item>
          <div class="error-message" *ngIf="getFormControl('buyType').dirty&&getFormControl('buyType').errors">
            <ng-container *ngIf="getFormControl('buyType').hasError('required')">请选择购买方式</ng-container>
          </div>
        </ng-container>

        <ng-container *ngIf="getFormControl('buyType').value">
          <ion-item>
            <ion-label fixed>金兰宝：</ion-label>
            <ion-input type="number" formControlName="jlb" placeholder="请输入金兰宝数量"></ion-input>
          </ion-item>
          <div class="error-message" *ngIf="getFormControl('jlb').dirty&&getFormControl('jlb').errors">
            <ng-container *ngIf="getFormControl('jlb').hasError('required')">请输入金兰宝数量</ng-container>
          </div>

          <ng-container *ngIf="getFormControl('buyType').value === 2">
            <ion-item>
              <ion-label fixed>矿石：</ion-label>
              <ion-input type="number" formControlName="ore" placeholder="请输入矿石数量"></ion-input>
            </ion-item>
            <div class="error-message" *ngIf="getFormControl('ore').dirty&&getFormControl('ore').errors">
              <ng-container *ngIf="getFormControl('ore').hasError('required')">请输入矿石数量</ng-container>
            </div>
          </ng-container>

          <ng-container *ngIf="getFormControl('miner').value?.isActiveCoin === state.yes">
            <ion-item>
              <ion-label fixed>激活币：</ion-label>
              <ion-input type="number" formControlName="active" placeholder="请输入激活币数量"></ion-input>
            </ion-item>
            <div class="error-message" *ngIf="getFormControl('active').dirty&&getFormControl('active').errors">
              <ng-container *ngIf="getFormControl('active').hasError('required')">请输入激活币数量</ng-container>
            </div>
          </ng-container>
        </ng-container>
      </ng-container>

      <ng-container *ngIf="!getFormControl('quickTransfer').value">
        <ion-item>
          <ion-label>转出币种：</ion-label>
          <ion-select formControlName="coin" [cancelText]="'取消'" [okText]="'确定'" placeholder="选择转出币种">
            <ion-option value="jlb">金兰宝</ion-option>
            <ion-option value="ore">矿石</ion-option>
            <ion-option value="active">激活币</ion-option>
          </ion-select>
        </ion-item>
        <div class="error-message" *ngIf="getFormControl('coin').dirty&&getFormControl('coin').errors">
          <ng-container *ngIf="getFormControl('coin').hasError('required')">请选择转出币种</ng-container>
        </div>

        <ion-item>
          <ion-label fixed>数量：</ion-label>
          <ion-input type="number" formControlName="num" placeholder="请输入数量"></ion-input>
        </ion-item>
        <div class="error-message" *ngIf="getFormControl('num').dirty&&getFormControl('num').errors">
          <ng-container *ngIf="getFormControl('num').hasError('required')">请输入转账数量</ng-container>
        </div>
      </ng-container>

    </ion-item-group>
    <button ion-button color="primary" block type="submit">确定</button>
  </form>
</ion-content>
